<template>
  <div class="container">
    <div class="between">
      <div class="header">
        <span class="text">数据列表</span>
        <el-button type="primary" size="mini" class="info1" @click="dialogVisible = true">添加</el-button>
        <el-button type="primary" size="mini" class="info">导出</el-button>
        <!-- 添加窗口 -->
        <el-dialog title="添加客户类型" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
          <el-form ref="form" :model="clientType" label-width="80px">
            <el-form-item label="父类型">
              <el-input v-model="clientType.parentType"></el-input>
            </el-form-item>
            <el-form-item label="客户类型名称">
              <el-input v-model="clientType.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="add">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div class="between-table">
        <el-table :header-cell-style="{ fontSize: '14px', textAlign: 'center' }"
          :cell-style="{ fontSize: '12px', textAlign: 'center' }" ref="multipleTable" :data="tableData"
          border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" >
          <el-table-column prop="parentType" label="父类型"></el-table-column>
          <el-table-column  prop="name" label="客户类型名称" ></el-table-column>
          <el-table-column label="操作" width="200px">
            <template scope="scope">
              <el-button type="text" @click="deleteType(scope.row.id)" size="small">删除</el-button>
              <el-button type="text" @click="handleEdit(scope.row)" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px; display: flex">
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page.sync="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000" >
            </el-pagination>
          </div>
        </div>

      </div>
      <!-- 编辑窗口 -->
        <el-dialog title="添加客户类型" :visible.sync="dialog2Visible" width="50%" :before-close="handleClose">
          <el-form ref="form" :model="clientType1" label-width="100px">
            <el-form-item label="编号">
              <el-input v-model="clientType1.id"></el-input>
            </el-form-item>
            <el-form-item label="父类型">
              <el-input v-model="clientType1.parentType"></el-input>
            </el-form-item>
            <el-form-item label="客户类型名称">
              <el-input v-model="clientType1.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateType">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
    </div>
  </div>
</template>
<script>
import {addClientType,deleteClienType,updateClientType,queryClientType} from '@/api/clientType.js'
export default {
  data() {
    return {
      isShow: true,
      tableData: [],
      dialogVisible: false,
      dialog2Visible: false,

      clientType: {
          parentType: "lkmjnhb",
          name: "445"
        },
      clientType1: {},
    };
  },
  created(){
    this.queryAll();
  },
  methods: {
    queryAll(){
      queryClientType().then(
        response=>{
          if(response.data.code==0){
            this.tableData=response.data.data;
            console.log(this.tableData);
          }else{
            alert(response.data.msg);
          }
        },error => {console.log('失败了',error);}
      )
    },
    add(){
      addClientType(this.clientType).then(
        response=>{
          if(response.data.code==0){
            this.queryAll();
            this.dialogVisible=false;
          }else{
            alert(response.data.msg);
          }
        },error => {console.log('失败了',error);}
      )
    },
    deleteType(id){
      // console.log(id);
      deleteClienType(id).then(
        response=>{
          if(response.data.code==0){
            this.queryAll();
            // alert(response.data.msg);
          }else{
            alert(response.data.msg);
          }
        },error => {console.log('失败了',error);}
      )
    },
    handleEdit(row){
      this.dialog2Visible=true;
      this.clientType1=row;
    },
    updateType(){
      updateClientType(this.clientType1).then(
        response=>{
          if(response.data.code==0){
            this.queryAll();
            this.dialog2Visible=false;
            // alert(response.data.msg);
          }else{
            alert(response.data.msg);
          }
        },error => {console.log('失败了',error);}
      )
    }

  },
};
</script>

<style>
.heade-text {
  border: 1px solid rgba(228, 228, 228, 1);
  text-align: center;
}

.heade-form {
  display: flex;
  position: relative;
  top: 12px;
}

.text1 {
  font-size: 14px;
  position: absolute;
  left: 12px;
}

.text2 {
  font-size: 12px;
  position: absolute;
  left: 100px;
  color: red;
}

.text3 {
  font-size: 12px;
  position: absolute;
  left: 180px;
  color: red;
}

.text4 {
  font-size: 12px;
  position: absolute;
  right: 140px;
  cursor: pointer;
}

.info1 {
  font-size: 14px;
  position: absolute;
  right: 70px;
  top: 14px;
}

.info {
  font-size: 14px;
  position: absolute;
  right: 12px;
  top: 14px;
}

.header {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(243, 243, 243, 1);
  border: 1px solid rgba(228, 228, 228, 1);
}

.between .header {
  margin-top: 20px;
}

.column {
  font-size: 12px;
  margin-right: 5px;
}
</style>